<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>获取所有菜品类目列表</button><br>
    <button>删除菜品类目列表</button><br>
    <button>修改菜品类目列表</button><br>
    <button>增加菜品类目列表</button> 
    <!-- 引入axios  -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        document.querySelectorAll('button')[0].onclick=()=>{
            //不需要静态托管 直接完整路径访问  模拟触发跨域
            axios.get('http://127.0.0.1:8090/admin/category').then(res=>{
                console.log('获取菜品类别成功')
                console.log(res.data)
            }).catch(err=>{
                console.log(err)
            })
        }
    </script>
    <!-- 删除 -->
    <script>
         document.querySelectorAll('button')[1].onclick=()=>{
            //delete 会直接将cid 作为 category/xxx 来进行传递给服务器
            //PUT/DELETE 请求之前浏览器会提前提交一个 预取请求 —— Preflight Request ——OPTINOS
            // 而optinos请求 目的是为了询问服务器是否支持接下来的 PUT 或 DELETE 请求方法 
            axios.delete('http://127.0.0.1:8090/admin/category/1').then(res=>{
                console.log('删除菜品类别成功')
                console.log(res.data)
            }).catch(err=>{
                console.log(err)
            })
        }
    </script>
    <!-- 修改 -->
    <script>
           document.querySelectorAll('button')[2].onclick=()=>{
               //修改cid为1的 cname为 :我被改了
               let data={cid:3,cname:"我是狗头"};
               axios.put('http://127.0.0.1:8090/admin/category',data).then(res=>{
                   console.log(res.data)
               }).catch(err=>{
                   console.log(err)
               })
           }
    </script>   
    <!-- 添加 -->
    <script>
         document.querySelectorAll('button')[3].onclick=()=>{
             let data = {cname:'恐龙类'};
             axios.post('http://127.0.0.1:8090/admin/category',data).then(res=>{
                console.log("添加新类别成功")
                console.log(res.data);
             }).catch(err=>{
                 console.log(err)
             })
         }
    </script>
    
</body>
</html>